<template>
    <div class="home-page">
        <n-space>
            <span>切换主题：</span>
            <BulbOutlined @click="onTheme" style="font-size: 20px" />
        </n-space>
        <n-space>
            <span>切换主题色：</span>
            <div style="width: 100px">
                <n-color-picker
                    v-model:value="primaryColor"
                    @update:value="colorChange"
                    :show-alpha="false"
                />
            </div>
        </n-space>
        <n-space>
            <n-button type="primary">primary按钮</n-button>
            <n-button type="success">success按钮</n-button>
            <n-button @click="onReset">还原主题色</n-button>
            <n-button @click="show = true">show</n-button>
            <n-input />
            <n-date-picker type="date" clearable />
            <n-select
                v-model:value="value"
                :options="options"
                style="width: 200px"
            />
        </n-space>
    </div>
    <SearchTable
        :columns="tableColumns"
        :topList="topList"
        apiMethod="logsList"
        showAdd
        @add="onAdd"
    />
    <FormModal
        :show="show"
        :formData="formData"
        :formList="formList"
        :rules="rules"
        :labelWidth="100"
        @close="show = false"
        addMethod=""
        updataMethod=""
        :autoSave="false"
        @save="show = false"
        @saveSuccess="show = false"
    />
    <div class="item-info">
        <div class="border"></div>
        <div class="dot dot1"></div>
        <div class="dot dot2"></div>
        <div class="dot dot3"></div>
        <div class="dot dot4"></div>
        <div class="dot dot5"></div>
        <div class="dot dot6"></div>
    </div>
</template>
<script>
import { h, ref } from "vue";
import { mapGetters } from "vuex";
import { BulbOutlined } from "@ant-design/icons-vue";
import config from "@/config.js";
import SearchTable from "@/components/SearchTable/index.vue";
import FormModal from "@/components/FormModal/index.vue";
import TabelActions from "@/components/TabelActions/index.vue";

export default {
    components: {
        BulbOutlined,
        SearchTable,
        FormModal,
    },
    setup() {
        let primaryColor =
            localStorage.getItem("primaryColor") || config.primaryColor;
        return {
            show: ref(false),
            cities: ref([]),
            primaryColor: ref(primaryColor),
            value: ref(undefined),
            options: [
                { label: "选项1", value: 1 },
                { label: "选项2", value: 2 },
                { label: "选项3", value: 3 },
            ],
            data: [
                {
                    id: 1,
                    name: "zzh",
                    age: "30",
                },
            ],
            formData: ref({
                name: "",
                age: 1,
                group: undefined,
                desc: "",
                time: undefined,
                gender: 1,
                role: null,
            }),
            formList: ref([
                {
                    label: "姓名",
                    type: "input",
                    key: "name",
                    placeholder: "请输入",
                    tip: "在这里输入姓名",
                },
                {
                    label: "年龄",
                    type: "input-number",
                    key: "age",
                    placeholder: "请输入",
                    tip: "在这里输入年龄",
                },
                {
                    label: "分组",
                    type: "select",
                    key: "group",
                    options: [
                        { label: "分组1", value: 1 },
                        { label: "分组2", value: 2 },
                        { label: "分组3", value: 3 },
                    ],
                },
                {
                    label: "介绍",
                    type: "textarea",
                    key: "desc",
                },
                {
                    label: "入职日期",
                    type: "date-picker",
                    key: "time",
                    clear: true,
                },
                {
                    label: "性别",
                    type: "radio",
                    key: "gender",
                    options: [
                        { label: "男", value: 1 },
                        { label: "女", value: 0 },
                    ],
                },
                {
                    label: "权限",
                    type: "checkbox",
                    key: "role",
                    options: [
                        { label: "管理员", value: 99 },
                        { label: "游客", value: 1 },
                        { label: "管理员", value: 2 },
                        { label: "游客", value: 3 },
                    ],
                },
            ]),
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入name",
                    },
                ],
            },
            topList: ref([
                {
                    label: "关键字",
                    type: "input",
                    key: "keywords",
                    value: "",
                    placeholder: "请输入关键字",
                },
                {
                    label: "类别",
                    type: "select",
                    key: "type",
                    value: undefined,
                    options: [
                        { label: "所有", value: 1 },
                        { label: "水果", value: 2 },
                        { label: "蔬菜", value: 3 },
                    ],
                },
                {
                    label: "时间范围",
                    type: "date-range",
                    key: "times",
                    value: undefined,
                    clearable: true,
                    dataDisabled(ts) {
                        return ts > Date.now();
                    },
                },
            ]),
        };
    },
    computed: {
        ...mapGetters(["sysThemeColor"]),
        tableColumns() {
            return [
                {
                    title: "ID",
                    key: "id",
                    align: "center",
                },
                {
                    title: "姓名",
                    key: "name",
                    align: "center",
                },
                {
                    title: "年纪",
                    key: "age",
                    align: "center",
                },
                {
                    title: "操作",
                    align: "center",
                    render: (rows) => {
                        return h(TabelActions, {
                            onEdit: () => this.onEdit(rows),
                            onDel: () => this.onDel(rows),
                        });
                    },
                },
            ];
        },
    },
    methods: {
        //切换主题色
        colorChange(value) {
            this.$store.commit("system/CHANGE_THEME", {
                primaryColor: value,
            });
        },

        //切换主题
        onTheme() {
            this.$store.commit("system/TOGGLE_THEME");
        },

        //还原主题色
        onReset() {
            this.primaryColor = config.primaryColor;
            this.$store.commit("system/CHANGE_THEME", {
                primaryColor: config.primaryColor,
            });
        },

        onEdit(val) {
            console.log("点击了编辑", val);
        },

        onDel(val) {
            console.log("点击了删除", val);
        },

        onAdd() {
            console.log("点击新增");
        },
    },
    mounted() {},
};
</script>
<style lang="less">
.home-page {
}
.item-info {
    margin: 20px auto;
    width: 300px;
    height: 50px;
    background: linear-gradient(to right, #f62c23, #4066f4);
    border-radius: 2px;
    position: relative;
    .border {
        position: absolute;
        top: 6px;
        left: 6px;
        right: 6px;
        bottom: 6px;
        border: 1px solid #bbb;
        border-radius: 2px;
    }
    .dot {
        position: absolute;
        height: 8px;
        width: 8px;
        background-color: #fff;
        border-radius: 50%;
        &.dot1 {
            right: 40px;
            top: 3px;
            animation: animateDot1 7s linear infinite;
        }
        &.dot2 {
            right: 28px;
            top: 3px;
            opacity: 0.7;
            animation: animateDot1 7s linear infinite;
            animation-delay: 0.1s;
        }
        &.dot3 {
            right: 16px;
            top: 3px;
            opacity: 0.4;
            animation: animateDot1 7s linear infinite;
            animation-delay: 0.2s;
        }
        &.dot4 {
            right: calc(100% - 10px);
            top: calc(100% - 10px);
            animation: animateDot2 7s linear infinite;
        }
        &.dot5 {
            right: calc(100% - 10px);
            top: calc(100% - 10px);
            opacity: 0.7;
            animation: animateDot2 7s linear infinite;
            animation-delay: 0.1s;
        }
        &.dot6 {
            right: calc(100% - 10px);
            top: calc(100% - 10px);
            opacity: 0.4;
            animation: animateDot2 7s linear infinite;
            animation-delay: 0.2s;
        }
    }
}
@keyframes animateDot1 {
    0% {
        right: 4px;
        top: 3px;
    }
    35% {
        right: calc(100% - 10px);
        top: 3px;
    }
    50% {
        right: calc(100% - 10px);
        top: calc(100% - 10px);
    }
    85% {
        right: 4px;
        top: calc(100% - 10px);
    }
    100% {
        right: 4px;
        top: 3px;
    }
}
@keyframes animateDot2 {
    0% {
        right: calc(100% - 10px);
        top: calc(100% - 10px);
    }
    35% {
        right: 4px;
        top: calc(100% - 10px);
    }
    50% {
        right: 4px;
        top: 3px;
    }
    85% {
        right: calc(100% - 10px);
        top: 3px;
    }
    100% {
        right: calc(100% - 10px);
        top: calc(100% - 10px);
    }
}
</style>
